<template>
  <!-- 活动管理 -->
  <div class="page-content">
    <div class="page-inner">
      <div>
        <el-form>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="活动名称">
                <el-input
                  clearable
                  prefix-icon="Search"
                  v-model.trim="queryParams.name"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="商家">
                <el-select
                  v-model="queryParams.storeId"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in shopList"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="状态">
                <el-select
                  v-model="queryParams.enable"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="上架中" :value="1" />
                  <el-option label="下架中" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-button type="primary" icon="Search" @click="SrarchList"
                >搜索</el-button
              >
              <el-button icon="Refresh" @click="handleReset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="margin-top: 10px">
        <el-button
          type="primary"
          icon="Plus"
          @click="proxy.$refs.addAndEditRef.init('add', shopList)"
          >新增</el-button
        >
      </div>
      <el-table
        :data="ListCoupon"
        v-loading="loading"
        ref="table"
        style="margin-top: 20px"
      >
        <el-table-column label="#" type="index" align="left" />
        <!-- <el-table-column label="编号" prop="id" align="left" /> -->
        <el-table-column label="活动名称" prop="name" align="left" />
        <el-table-column label="封面图" prop="name" align="left" >
            <template #default="scope">
                <ImagePreview
                        :src="scope.row.cover"
                        width="40px"
                        height="40px"
                />
            </template>
        </el-table-column>
        <el-table-column label="所属商家" prop="storeName" align="left"/>
        <el-table-column label="开奖时间" prop="winningTime" align="left" />
        <el-table-column label="参与人数" prop="publishNum" align="left">
          <template #default="scope">
            {{ scope.row.partNum }}人
          </template>
        </el-table-column>
        <el-table-column label="上下架" align="left">
          <template #default="scope">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.enable"
              @click="handleChangeStatus(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="left" />
        <!-- <el-table-column label="状态" align="left">
          <template #default="scope">
            <div 
              :style="{color: new Date().getTime()<new Date(scope.row.expireDay).getTime() ? '#1a9a34' : '#ff201d'}"
              style="font-weight: bold;"
            >
              {{ new Date().getTime()<new Date(scope.row.expireDay).getTime() ? '正常' : '过期' }}
            </div>
          </template>
        </el-table-column> -->

        <!-- <el-table-column label="是否推荐" align="left">
          <template #default="scope">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.recommend"
              @click="handleChangeRecommend(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="创建时间" prop="createTime" align="center" /> -->
        <el-table-column fixed="right" label="操作" align="center" min-width="160px">
          <template #default="scope">
            <div style="display: flex; justify-content: center">
              <el-button
                type="primary"
                size="small"
                @click="proxy.$refs.useInfoRef.init('edit',shopList, scope.row)"
                >发起记录</el-button
              >
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                @click="proxy.$refs.addAndEditRef.init('edit', shopList, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                @click="handleDel(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-show="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </div>
    <addAndEdit ref="addAndEditRef" @success="success" v-if="!loading" />
    <useInfo ref="useInfoRef" v-if="!loading" />

  </div>
</template>
<script setup>
import addAndEdit from './addAndEdit'
import useInfo from './useInfo'

import { listPage, info, add, edit, del, changeStatusApi } from '@/api/operates/active.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCurrentInstance, onBeforeMount, ref } from 'vue'
import { listPage as shopListApi } from '@/api/operates/shopList/index'
import { useRouter } from 'vue-router'
const router = useRouter()
const { proxy } = getCurrentInstance() //proxy
const loading = ref(false)
const shopList = ref([])
const ListCoupon = ref([]) //活动列表数据
const total = ref(0)
const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  couponName: '',
  status: ''
})
onBeforeMount(() => {
  getShopList()
  getList()
})

function getShopList(){
  shopListApi({pageNum:1, pageSize:100000}).then((res)=>{
    shopList.value = res.data.list
  })
}

//获取列表数据
const getList = () => {
  loading.value = true
  let query = {
    ...queryParams.value
  }
  listPage(query)
    .then(res => {
      ListCoupon.value = res.data.list
      total.value = res.data.total
      loading.value = false
    })
    .catch(err => {
      loading.value = false
      ElMessage.error(err.message || `${text}失败`)
    })
}

const success = () => {
  // queryParams.value.pageNum = 10
  queryParams.value.pageNum = 1,
  getList()
}

//搜索
const SrarchList = () => {
  getList()
}

// 重置
const handleReset = () => {
   queryParams.value = {
    pageNum: 1,
    pageSize: 10
   }
   getList()
}

const handleChangeStatus = row => {
  console.log('row.status', row.status)
  changeStatusApi(row).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
    .catch(() => {
      getList()
    })
};

// const handleChangeRecommend = row => {
//   console.log('row.status', row.status)
//   changeRecommendApi(row).then(res => {
//       ElMessage.success('操作成功')
//       getList()
//     })
//     .catch(() => {
//       getList()
//     })
// };

// 删除
const handleDel = row => {
  ElMessageBox.confirm(`此操作将永远删除该数据,是否继续?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let id = row.id
    del({ id })
      .then(res => {
        ElMessage.success(`删除成功`)
        getList()
      })
      .catch(err => {
        loading.value = false
        ElMessage.error(`删除失败`)
      })
  })
}
</script>
<script>
export default {
  // name: "store_admin",
}
</script>
<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  .page-inner {
    padding: 20px 15px;
  }
}
</style>
